import {Align, SelectMode} from "../../common/ark-table/ArkTableOptions";
import {ElMessage} from "element-plus";
import ArkPaginationTable from "../ark-pagination-table/ArkPaginationTable.vue";
import {ArkPaginationTableOptions} from "../ark-pagination-table/ArkPaginationTableOptions";

export default {
  title: 'ark-component-v2/ArkPaginationTable',
  component: ArkPaginationTable,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">ArkTable、ArkPagination</span> 使用`
      }
    }
  },
  argTypes: {
    options: {description: 'ArkPaginationTableOptions'},
    '\'column-\' + column.prop': {description: '单元格内容部分，参数为row、column、rowIndex、value'},
  }
};

const pageData = [
  {
    "id": 1,
    "year": 2021,
    "scoreClassName": "Ⅰ类学分",
    "vocationalQualificationName": "西医",
    "titleSegmentName": "中级及以上",
    "maxScore": 5,
  },
  {
    "id": 2,
    "year": 2021,
    "scoreClassName": "Ⅱ类学分",
    "vocationalQualificationName": "西医",
    "titleSegmentName": "中级及以上",
    "maxScore": 5,
  },
  {
    "id": 4,
    "year": 2022,
    "scoreClassName": "Ⅰ类学分",
    "vocationalQualificationName": "西医",
    "titleSegmentName": "中级及以上",
    "maxScore": 30,
  },
  {
    "id": 5,
    "year": 2022,
    "scoreClassName": "Ⅱ类学分",
    "vocationalQualificationName": "西医",
    "titleSegmentName": "中级及以上",
    "maxScore": 30,
  },
  {
    "id": 6,
    "year": 2023,
    "scoreClassName": "Ⅰ类学分",
    "vocationalQualificationName": "西医",
    "titleSegmentName": "中级及以上",
    "maxScore": 5,
  },
  {
    "id": 7,
    "year": 2023,
    "scoreClassName": "Ⅱ类学分",
    "vocationalQualificationName": "西医",
    "titleSegmentName": "中级及以上",
    "maxScore": 5,
  }
];

export const Basic = {
  name: '基本使用',
  render: (args: ArkPaginationTableOptions) => ({
    components: {ArkPaginationTable},
    setup() {
      return {args};
    },
    template: `
      <ArkPaginationTable v-model:options="args.options" style="width: 900px"/>`,
  }),
  args: {
    options: {
      rowNumber: true,
      rowNumberPageStart: false,
      selectMode: SelectMode.MULTIPLE_CHECKBOX_ROWS,
      striped: true,
      columns: [
        {
          show: true,
          label: '年度',
          prop: 'year',
          width: '80px',
          align: Align.CENTER
        },
        {
          label: '学分分类',
          prop: 'scoreClassName',
        },
        {
          label: '执业资格',
          prop: 'vocationalQualificationName',
        },
        {
          label: '职称段',
          prop: 'titleSegmentName',
        },
        {
          label: '分数上限',
          prop: 'maxScore',
        },
      ],
      // data: pageData,
      pagination: {
        total: 6,
        pageSize: 2,
        pageNumber: 2,
        onPageSizeChange(pageSize: number) {
          ElMessage({
            message: '每页数量改变事件，参数请看控制台打印',
            type: 'success',
          });
          console.log('每页数量改变事件参数', pageSize);
        },
        afterPageSizeChange(pageSize: number) {
          ElMessage({
            message: '每页数量改变之后，参数请看控制台打印',
            type: 'success',
          });
          console.log('每页数量改变之后参数', pageSize);
        },
        onPageNumberChange(pageNumber: number) {
          ElMessage({
            message: '页码改变事件，参数请看控制台打印',
            type: 'success',
          });
          console.log('页码改变事件参数', pageNumber);
        },
        afterPageNumberChange(pageNumber: number) {
          ElMessage({
            message: '页码改变之后，参数请看控制台打印',
            type: 'success',
          });
          console.log('页码改变之后参数', pageNumber);
        },
      },
      fetchDataParams: {
        id: 1
      },
      defineDataFetch(params: any) {
        ElMessage({
          message: '请求操作，参数请看控制台打印',
          type: 'success',
        });
        console.log('请求操作参数', params);

        function getPageData(params: any) {
          if (params.pageSize >= pageData.length) {
            return pageData;
          }

          let startIndex = (params.pageNumber - 1) * params.pageSize;
          let endIndex = startIndex + params.pageSize;
          if (endIndex >= pageData.length) {
            return pageData.slice(startIndex, pageData.length);
          }

          return pageData.slice(startIndex, endIndex);
        }

        // return getPageData(params)

        return {
          total: pageData.length,
          pageSize: params.pageSoze,
          // rows: pageData,
          rows: getPageData(params)
        }

        /*return Promise.resolve({
          total: pageData.length,
          pageSize: params.pageSoze,
          rows: getPageData(params)
        })*/
      }
    }
  },
};